<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <style>
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            width: 260px;
            border: solid 1px;
        }
        ul>li{
            border-bottom: dashed 1px #666666;
            padding: 5px 10px;
        }
        ul>li:nth-child(1){
            font-weight: 700;
            background-color: yellow;
            border: none;
        }
        ul>li>span{
            display: inline-block;
            width: 120px;
        }
        #add{
            padding: 5px 10px;
        }
        #add>div>label{
            display: inline-block;
            width: 60px;
            text-align: right;
        }
    </style>
</head>
<body>
<div>
    <ul id="ul">
<!--        <li><span>姓名</span><span>年龄</span></li>-->
<!--        <li><span>张三</span><span>20</span></li>-->
<!--        <li><span>李四</span><span>19</span></li>-->
    </ul>
    <div id="add">
        <div>
        <label for="name">姓名:</label><input type="text" id="name">
        </div>
        <div><label for="age">年龄:</label><input type="text" id="age">
        </div>
        <div><label></label><input type="button" value="增加" id="btn_add"></div>
    </div>
    <script>
<!--        定义一个数组-->
        var arr=[]
        add()
        var btn=document.getElementById("btn_add")
        btn.onclick=function(){
            var name=document.getElementById("name").value;
            var age=document.getElementById("age").value;
            var obj={};
            obj.name=name
            obj.age=age
            arr.push(obj)
            add()
        }
        function add()
        {
            var html_obj="<li><span>姓名</span><span>年龄</span></li>"
            for (i = 0; i < arr.length; i++) {
                if (arr[i].name&&arr[i].age){
                    html_obj += "<li>"
                    html_obj += "<span>" + arr[i].name + "</span>"
                    html_obj += "<span>" + arr[i].age + "</span>"
                    html_obj += "</li>"
                }

            }
            document.getElementById("ul").innerHTML = html_obj
        }
    </script>
</div>
</body>
</html>